<template>
    <drop-wrap :data="data" :index="index"  :element="element">
      <div class="form-area">
        <el-form  :model="store.models" :id="element.cid" :size="formSize" label-suffix=":" :label-position="formLabelPosition" :label-width="formLabelWidth">

          <h4 class="form-title">{{element.config.title}}</h4>

          <draggable v-model="element.columns" :no-transition-on-drag="true" v-bind="{group:'site', ghostClass: 'ghost',animation: 200, handle: '.mover'}" @add="handleContainerAdd($event)">
            <transition-group name="fade" tag="div" v-drop-blank class="widget-form-container" :style="style">
              <widget v-for="(el, i) in element.columns" :element="el" :index="i" :key="el.key || Math.random() * 5" :data.sync="element.columns"></widget>
            </transition-group>
          </draggable>

        </el-form>
      </div>
    </drop-wrap>
</template>

<script>
  import clone from 'clone'
  import Draggable from 'vuedraggable'
  export default {
    props: ["element", "data", "index"],
    data () {
      return {
      }
    },
    computed: {
      store () {
        return this.element.getRoot();
      },
      formSize () {
        return this.element['config']['size']
      },
      formLabelPosition () {
        return this.element['config']['labelPosition']
      },
      formLabelWidth () {
        return this.element['config']['labelWidth'] + 'px'
      },
      style () {
        let boxModel = {}
        Object.entries(this.element.boxModelStyle).map((item) => {
          boxModel[item[0]] = item[1] + 'px'
        })
        return {
          ...boxModel
        }
      }

    },
    components: { Draggable },
    methods: {
      handleContainerAdd (evt) {
        console.log('add', evt)
        console.log('end', evt)
        const newIndex = evt.newIndex
        const to = evt.to
        console.log(to)

        console.log('需要删除的key', this.element.columns[newIndex].key)
        if (this.element.columns[newIndex].key) {
          this.store.delComponentMap(this.element.columns[newIndex])
        }
        this.$set(this.element.columns, newIndex, this.store.generateComponent({
          ...clone(this.element.columns[newIndex]),
        }))
        this.store.current = this.element.columns[newIndex]
        this.$handleStack.push(clone(this.store.root))
      }
    }
  }
</script>


<style>
.form-area .el-form--label-left .el-form-item__label {
  text-align: left !important;
}
.form-area .el-form--label-top .el-form-item__label {
  float: none !important;
  display: inline-block !important;
  text-align: left !important;
  padding: 0 0 10px !important;
}
</style>

<style  scoped>
.widget-form-container {
  min-height: 100px;
}
.form-area {
  padding: 10px;
}
.form-title {
  line-height: 45px;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 10px;
}
</style>